<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.25">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <link rel="apple-touch-icon" type="image/png" href="elogo.png">
  <link rel="icon" type="image/png" href="elogo.png">
  <link rel="stylesheet" title="base" href="style.css?%VERSION%" type="text/css">
  <link rel="stylesheet" title="base" href="settings.css?%VERSION%" type="text/css">
  <title>ёRadio - Settings</title>
  <style> </style>
  </head>
<body>
  <div class="content">
    <h2 class="pagetitle">SёTTINGS</h2>
    <div class="navigation group group_system hidden" id="navigation">
      <div class="navitem group group_system hidden" data-target="group_system">system</div>
      <div class="navitem group group_display group_nextion hidden" data-target="group_display">screen</div>
      <div class="navitem group group_controls hidden" data-target="group_controls">controls</div>
      <div class="navitem group group_timezone hidden" data-target="group_timezone">timezone</div>
      <div class="navitem group group_wifi hidden" data-target="group_wifi">wifi</div>
      <div class="navitem group group_weather hidden" data-target="group_weather">weather</div>
    </div>
    <div class="playerwrap">
      <div class="settingsirwrap" id="settingscontent"><a name="system"></a>
        <section class="group group_system hidden" id="group_system">
          <div class="title"><span>system</span></div><div class="reset" data-name="system"></div>
          <div class="flex-row">
            <div class="checkbox off nous" id="smartstart">Smart Start</div>
            <div class="checkbox off nous" id="audioinfo">Audio info</div>
            <div class="checkbox off nous group group_vu hidden" id="vumeter">VU Meter</div>
          </div>
          <div class="flex-row">
            <div class="inputwrap">
              <span class="inputtitle">soft ap reboot delay (min)</span>
              <span class="inputinfo" id="slsoftapinfo">0</span>
              <input type="range" id="slsoftap" class="slider" data-slaveid="slsoftapinfo" name="softap" min="0" max="20" value="0">
            </div>
          </div>
          <div class="flex-row" id="mdnsnamerow">
            <div class="inputwrap">
              <span class="inputtitle">mDNS name</span>
              <input type="text" id="mdnsname" class="textinput inputchange" name="mdnsname" value="" maxlength="24" />
            </div>
            <div class="button apply hlbutton" data-name="rebootmdns" style=" margin-top: 24px; height: 37px;">save</div>
          </div>
          <div class="row-title"><span>update</span></div>
          <div class="flex-row last">
            <div class="button apply" data-name="fwupdate" id="fwupdate">Firmware</div>
            <div class="button apply" data-name="webboard" id="webboard">Board</div>
          </div> 
        </section><a name="screen"></a>
        <section class="group group_display group_oled group_nextion hidden" id="group_display">
          <div class="title"><span>screen</span></div><div class="reset" data-name="screen"></div>
          <div class="flex-row">
            <div class="checkbox off nous group group_tft hidden" id="flipscreen">Flip screen</div>
            <div class="checkbox off nous group group_tft hidden" id="invertdisplay">Invert screen</div>
            <div class="checkbox on nous group group_brightness group_oled hidden" id="screenon">Turn on</div>
          </div>
          <div class="flex-row group group_tft group_oled group_nextion hidden">
            <div class="checkbox off nous" id="numplaylist">numbered playlist</div>
          </div>
          <div class="flex-row group group_brightness hidden">
            <div class="inputwrap">
              <span class="inputtitle">brightness</span>
              <span class="inputinfo" id="slbrightnessinfo">0</span>
              <input type="range" id="slbrightness" class="slider" data-slaveid="slbrightnessinfo" name="brightness" min="0" max="100" value="100">
            </div>
          </div>
          <div class="flex-row group group_nokia hidden">
            <div class="inputwrap">
              <span class="inputtitle">contrast</span>
              <span class="inputinfo" id="slcontrastinfo">0</span>
              <input type="range" id="slcontrast" class="slider" data-slaveid="slcontrastinfo" name="contrast" min="0" max="100" value="55">
            </div>
          </div>
          <div class="row-title"><span>screensaver</span></div>
          <div class="flex-row group group_tft group_oled group_nextion hidden" style="margin-top:20px;">
            <div class="inputwrap">
              <span class="inputtitle">screensaver enabled</span>
              <div class="checkbox off nous" id="screensaverenabled" style="padding-top:16px;"></div>
            </div>
            <div class="inputwrap">
              <span class="inputtitle">screensaver timeout (sec)</span>
              <input type="number" id="screensavertimeout" class="textinput inputchange" name="screensavertimeout" value="" maxlength="3" min="0" max="65520" />
            </div>
          </div>
        </section>
        <section class="group group_controls hidden" id="group_controls">
          <div class="title"><span>Controls</span></div><div class="reset" data-name="controls"></div>
          <div class="flex-row">
            <div class="inputwrap">
              <span class="inputtitle">volume steps</span>
              <span class="inputinfo" id="slvolstepsinfo">0</span>
              <input type="range" id="slvolsteps" class="slider" data-slaveid="slvolstepsinfo" name="volsteps" min="1" max="10" value="1">
            </div>
          </div>
          <div class="flex-row group group_touch hidden">
            <div class="checkbox off nous" id="fliptouch">Flip touch</div>
            <div class="checkbox off nous" id="dbgtouch">Debug touch</div>
          </div>
          <div class="flex-row group group_encoder hidden">
            <div class="inputwrap">
              <span class="inputtitle">encoder acceleration</span>
              <span class="inputinfo" id="slencaccelerationinfo">0</span>
              <input type="range" id="slencacceleration" class="slider" data-slaveid="slencaccelerationinfo" name="encacceleration" min="0" max="700" value="200">
            </div>
          </div>
          <div class="flex-row">
            <div class="inputwrap">
              <span class="inputtitle">one-click station switching</span>
              <div class="checkbox off nous" id="oneclickswitching"></div>
            </div>
          </div>
          <div class="flex-row group group_ir hidden">
            <div class="inputwrap">
              <span class="inputtitle">IR tolerance [<a href="https://crankyoldgit.github.io/IRremoteESP8266/doxygen/html/" target="_blank">docs</a>]</span>
              <span class="inputinfo" id="slirtlpinfo">0</span>
              <input type="range" id="slirtlp" class="slider" data-slaveid="slirtlpinfo" name="irtlp" min="10" max="80" value="0">
            </div>
          </div>
          <div class="flex-row group group_ir last hidden">
            <div class="button apply" data-name="setupir">IR Recorder</div>
          </div>
        </section><a name="timezone"></a>
        <section class="group group_timezone hidden" id="group_timezone">
          <div class="title"><span>timezone</span></div><div class="reset" data-name="timezone"></div>
          <div class="flex-row">
            <div class="inputwrap">
              <span class="inputtitle">hours</span>
              <input type="number" id="tzhour" class="textinput" name="tzhour" value="" maxlength="3" min="-12" max="14" />
            </div>
            <div class="inputwrap">
              <span class="inputtitle">minutes</span>
              <input type="number" id="tzmin" class="textinput" name="tzmin" value="" maxlength="2" min="0" max="45" step="15" />
            </div>
          </div>
          <div class="flex-row">
            <div class="inputwrap">
              <span class="inputtitle">ntp server #1</span>
              <input type="text" id="sntp1" class="textinput" name="sntp1" value="" maxlength="34" />
            </div>
            <div class="inputwrap">
              <span class="inputtitle">ntp server #2</span>
              <input type="text" id="sntp2" class="textinput" name="sntp2" value="" maxlength="34" />
            </div>
          </div>
          <div class="flex-row last">
            <div class="button apply hlbutton" data-name="applytz" id="applytz">Apply</div>
          </div>
        </section><a name="wifi"></a>
        <section class="group group_wifi hidden" id="group_wifi">
          <div class="title"><span>Wi-Fi</span></div>
          <div class="flex-row credential">
            <div class="inputwrap">
              <span class="inputtitle">ssid</span>
              <input type="text" id="ssid0" class="textinput" name="ssid" value="" maxlength="30" autocomplete="off" />
            </div>
            <div class="inputwrap">
              <span class="inputtitle">pass</span>
              <input type="text" id="pass0" class="textinput" name="pass" value="" placeholder="**********" maxlength="40" autocomplete="off" readonly="readonly" data-pass="" onfocus="this.removeAttribute('readonly');" />
            </div>
          </div>
          <div class="flex-row credential">
            <div class="inputwrap">
              <span class="inputtitle">ssid</span>
              <input type="text" id="ssid1" class="textinput" name="ssid" maxlength="30" autocomplete="off" />
            </div>
            <div class="inputwrap">
              <span class="inputtitle">pass</span>
              <input type="text" id="pass1" class="textinput" name="pass" value="" placeholder="**********" maxlength="40" autocomplete="off" readonly="readonly" data-pass="" onfocus="this.removeAttribute('readonly');" />
            </div>
          </div>
          <div class="flex-row credential">
            <div class="inputwrap">
              <span class="inputtitle">ssid</span>
              <input type="text" id="ssid2" class="textinput" name="ssid" value="" maxlength="30" autocomplete="off" />
            </div>
            <div class="inputwrap">
              <span class="inputtitle">pass</span>
              <input type="text" id="pass2" class="textinput" name="pass" value="" placeholder="**********" maxlength="40" autocomplete="off" readonly="readonly" data-pass="" onfocus="this.removeAttribute('readonly');" />
            </div>
          </div>
          <div class="flex-row credential">
            <div class="inputwrap">
              <span class="inputtitle">ssid</span>
              <input type="text" id="ssid3" class="textinput" name="ssid" value="" maxlength="30" autocomplete="off" />
            </div>
            <div class="inputwrap">
              <span class="inputtitle">pass</span>
              <input type="text" id="pass3" class="textinput" name="pass" value="" placeholder="**********" maxlength="40" autocomplete="off" readonly="readonly" data-pass="" onfocus="this.removeAttribute('readonly');" />
            </div>
          </div>
          <div class="flex-row credential">
            <div class="inputwrap">
              <span class="inputtitle">ssid</span>
              <input type="text" id="ssid4" class="textinput" name="ssid" value="" maxlength="30" autocomplete="off" />
            </div>
            <div class="inputwrap">
              <span class="inputtitle">pass</span>
              <input type="text" id="pass4" class="textinput" name="pass" value="" placeholder="**********" maxlength="40" autocomplete="off" readonly="readonly" data-pass="" onfocus="this.removeAttribute('readonly');" />
            </div>
          </div>
          <div class="flex-row last">
            <input id="file-upload" type="file" accept=".txt, .csv" hidden/>
            <div class="button group group_system hidden" data-name="wifiexport">Export</div>
            <div class="button hlbutton" data-name="wifiupload">Save &amp; Reboot</div>
          </div>
        </section><a name="weather"></a>
        <section class="group group_weather hidden" id="group_weather">
          <div class="title"><span>Weather</span></div><div class="reset" data-name="weather"></div>
          <div class="flex-row center">
            <div class="checkbox off nous" id="showweather">show weather</div>
          </div>
          <div class="flex-row">
            <div class="inputwrap">
              <span class="inputtitle">latitude</span>
              <input type="number" id="weatherlat" class="textinput" name="weatherlat" value="" min="-90" max="90" step="0.0001" />
            </div>
            <div class="inputwrap">
              <span class="inputtitle">longitude</span>
              <input type="number" id="weatherlon" class="textinput" name="weatherlon" value="" min="-90" max="90" step="0.0001" />
            </div>
          </div>
          <div class="flex-row">
            <div class="inputwrap">
              <span class="inputtitle">openweathermap api key [<a href="https://openweathermap.org/appid" target="_blank">link</a>]</span>
              <input type="text" id="weatherkey" class="textinput" name="weatherkey" value="" />
            </div>
          </div>
          <div class="flex-row last">
            <div class="button apply hlbutton" data-name="applyweather">Apply</div>
          </div>
        </section><a name="controls"></a>
        <div class="hr">&nbsp;</div>
      </div>
    </div><!--playerwrap-->
    <div class="button apply done group group_system hidden" data-name="settingsdone" id="settingsdone">done</div>
    <div id="copy">powered by <a target="_blank" href="https://github.com/e2002/yoradio/">ёRadio</a> | v%VERSION%</div>
  </div>
  <script src="script.js?%VERSION%"></script>
</body>
